<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <script>
      /*
        1. 根据html，生成一个dom树
        2. 根据css，生成一个css树
        3. 根据dom树和css树，生成一个渲染树
        4. 根据渲染树，计算得到每一个元素的坐标
        5. 渲染
      */

      /*
        本来有一段html要渲染的
        <div class="app" id="app">
          <h2>标题123</h2>
          <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
          </ul>  
        </div>
        会先将html代码转成一个js的对象
        createElement()
        {
          tag: "div",
          attr: {class: "app", id: "app"},
          children: [
            {
              tag: "h2",
              attr: {},
              children: "标题123"
            },
            {
              tag: "ul",
              attr: {},
              children: [
                {
                  tag: "li",
                  attr: {},
                  children: "11"
                },
                {
                  tag: "li",
                  attr: {},
                  children: "22"
                },
                {
                  tag: "li",
                  attr: {},
                  children: "33"
                },
                {
                  tag: "li",
                  attr: {},
                  children: "44"
                },
              ]
            }
          ]
        }
      */

      /*
        当有一段html代码要渲染的时候，先将html转成一个js的对象存在浏览器的内存中，
        当我们修改html的时候，不直接修改，而是去修改这个js对象
        等待所有的修改都结束以后，重新转成html，再做一次性的渲染
      */

      // 修改js的变量的效率会比修改dom高很多

      // console.time("传统方式");
      // for (let i = 0; i < 10000; i++) {
      //   document.querySelector("#app").innerHTML = i;
      // }
      // console.timeEnd("传统方式");

      console.time("虚拟dom方式");
      let x = 0;
      for (let i = 0; i < 10000; i++) {
        x = i;
      }
      document.querySelector("#app").innerHTML = x;
      console.timeEnd("虚拟dom方式");
    </script>
  </body>
</html>
